import { Tabs } from 'antd';
import { useContext, useEffect, useMemo, useState } from 'react';
import { useElementResizeWidth } from '../../hooks/useElementResizeWidth';
import { TreeSelectKeyContext } from '../../index';
import ComponentTableList from '../components/componentTableList';
import './index.less';

const JfAndDfTable = (props: any) => {
  const { elementResizeWidth } = useElementResizeWidth(
    document.querySelector('#JfAndDfTable-elementResizeWidth')!,
  );
  const { treeSelecNode } = useContext<any>(TreeSelectKeyContext);
  const { treeSelectKey } = treeSelecNode;
  const [valIndex, setValIndex] = useState<string>('1');
  const Tabsdata = [
    {
      key: '1',
      label: '序时账月发生额分析',
    },
    {
      key: '2',
      label: '科目记账汇总分析',
    },
  ];

  const TabsdataUser = [
    {
      key: '1',
      label: '会计分录作出人员统计',
    },
    {
      key: '2',
      label: '检查岗位职责',
    },
  ];
  const [tabsdataArr, setTabsdataArr] = useState<any[]>(Tabsdata);
  const changeTabsKey = (val: string) => {
    setValIndex(val);
  };

  useEffect(() => {
    if (treeSelectKey === '0-0-0') {
      setTabsdataArr(Tabsdata);
    } else if (treeSelectKey === '0-0-0-0') {
      setTabsdataArr(TabsdataUser);
    }
    setValIndex('1');
  }, [treeSelectKey]);

  const watchWidth = useMemo(() => {
    // 根据页面的tab和筛选项的总宽度自适应控制
    let pageRightWidth = 0;
    if (treeSelectKey === '0-0-0') {
      pageRightWidth = 893;
    }
    if (treeSelectKey === '0-0-0-0') {
      pageRightWidth = 893;
    }

    return elementResizeWidth >= pageRightWidth;
  }, [elementResizeWidth, treeSelectKey]);

  return (
    <div className="JfAndDfTable" id="JfAndDfTable-elementResizeWidth">
      {/* <Tabs items={items} /> */}
      <div
        style={
          watchWidth
            ? {
                width: '308px',
                height: '38px',
                display: 'inline-flex',
                position: 'absolute',
                zIndex: 10,
              }
            : { width: '100%', height: '38px' }
        }
      >
        <Tabs
          defaultActiveKey="1"
          onChange={(val: string) => {
            changeTabsKey(val);
          }}
          activeKey={valIndex}
          type="card"
        >
          {tabsdataArr.map((item: any) => {
            return <Tabs.TabPane tab={item.label} key={item.key} />;
          })}
        </Tabs>
      </div>

      <div style={{ width: '100%', height: ' calc(100% - 40px)' }}>
        <ComponentTableList changeTab={valIndex} />
      </div>
    </div>
  );
};
export default JfAndDfTable;
